<template>

    <el-dialog :title="$t('page-trade-complaint.d2-crud.column-detail')" :visible.sync="visible" :close-on-click-modal="false" append-to-body>

      <el-form ref="main-form" status-icon :model="mainQuery" :rules="rules" label-width="120px" label-position="left" :inline="false">

        <template v-if="!!data">
          <el-form-item  :label="$t('page.form.merchantIdentificationNumber')" size="mini" prop="">
            <span v-text="data.mchNo"></span>
          </el-form-item>


          <el-form-item :label="$t('page.form.eventOrderNumber')" size="mini" prop="">
            <span v-text="data.eventOrderNo"></span>
          </el-form-item>

          <el-form-item :label="$t('page.form.accountType')" size="mini" prop="">
            <span v-text="data.strAccountType"></span>
          </el-form-item>

          <el-form-item :label="$t('page.form.money')" size="mini" prop="">
            <span v-text="data.floatAmount"></span>
          </el-form-item>

          <el-form-item :label="$t('page.form.timetotype')" size="mini" prop="">
            <span v-text="data.strType"></span>
          </el-form-item>

          <el-form-item :label="$t('page.form.timestep')" size="mini" prop="">
            <span v-text="data.strStep"></span>
          </el-form-item>

          <el-form-item :label="$t('page.form.stateevent')" size="mini" prop="">
            <span v-text="data.strReviewStatus"></span>
          </el-form-item>

          <el-tabs type="" v-model="activeName">
            <el-tab-pane :label="$t('page.form.apply')" name="create">
              <el-form-item :label="$t('page.form.timeApplication')" size="mini" prop="">
                <span v-text="data.createTime"></span>
              </el-form-item>
              <el-form-item :label="$t('page.form.applicationNote')" size="mini" prop="">
                <span v-text="data.createRemark"></span>
              </el-form-item>
              <el-form-item :label="$t('page.form.proposer')" size="mini" prop="">
                <span v-text="data.createBy"></span>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane :label="$t('page.form.firsttrial')" name="check">
              <el-form-item :label="$t('page.form.Thefirsttime')" size="mini" prop="">
                <span v-text="data.reviewTime"></span>
              </el-form-item>
              <el-form-item :label="$t('page.form.firstTrial')" size="mini" prop="">
                <span v-text="data.reviewRemark"></span>
              </el-form-item>
              <el-form-item :label="$t('page.form.firstperson')" size="mini" prop="">
                <span v-text="data.reviewBy"></span>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane :label="$t('page.form.re-check')" name="recheck">
              <el-form-item :label="$t('page.form.checkthetime')"   size="mini" prop="">
                <span v-text="data.reReviewTime"></span>
              </el-form-item>
              <el-form-item :label="$t('page.form.reviewOpinion')"    size="mini" prop="">
                <span v-text="data.reReviewRemark"></span>
              </el-form-item>
              <el-form-item :label="$t('page.form.reviewer')"    size="mini" prop="">
                <span v-text="data.reReviewBy"></span>
              </el-form-item>
            </el-tab-pane>
            <!-- <el-tab-pane label="出款" name="money">
              <el-form-item label="出款时间" size="mini" prop="">
                <span v-text="data.moneyTime"></span>
              </el-form-item>
              <el-form-item label="出款说明" size="mini" prop="">
                <span v-text="data.moneyRemark"></span>
              </el-form-item>
              <el-form-item label="出款人" size="mini" prop="">
                <span v-text="data.moneyBy"></span>
              </el-form-item>
            </el-tab-pane> -->
          </el-tabs>

        </template>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="success" :loading="loading" @click="handleAction('check')" v-if="canCheck()">{{ $t('page.form.firsttrial') }}</el-button>
        <el-button size="mini" type="success" :loading="loading" @click="handleAction('recheck')" v-if="canRecheck()">{{ $t('page.form.re-check') }}</el-button>
        <el-button size="mini" type="success" :loading="loading" @click="handleAction('money')" v-if="canMoney()">{{ $t('page.form.paragraph') }}</el-button>
        <el-button size="mini" type="success" :loading="loading" @click="handleAction('unfreeze')" v-if="canUnfreeze()">解冻</el-button>
        <el-button @click="close" size="mini">{{ $t('page.form.close') }}</el-button>
      </div>

    </el-dialog>

</template>

<script>

import ApiMain from '@/api/settle.operatetrade';

export default {
  mixins: [
  ],
  props: [
    'accountTypeOptions',
    'eventTypeOptions',
    'statusOptions',
  ],
  data () {
    return {

      visible             : false,
      loading             : false,


      mainQueryRaw: null,
      mainQuery: {
      },

      rules: {
        remark: [
          { required: true, message: this.$t('page.form.tips11') , trigger: 'blur' },
        ],
      },

      id  : null,
      data: null,

      action       : '',
      activeName: 'create',

    }
  },
  mounted () {
    this.mainQueryRaw = Object.copy(this.mainQuery);
  },

  methods: {

    canCheck () {
      if (! this.data) return false;
      return this.data.canCheck;
    },

    canRecheck () {
      if (! this.data) return false;
      return this.data.canRecheck;
    },

    canMoney () {
      if (! this.data) return false;
      return this.data.canMoney;
    },

    canUnfreeze () {
      if (! this.data) return false;
      return this.data.canUnfreeze;
    },

    show (data, action) {

      this.reset();
      console.log('???!',data)

      this.data = data;
      this.action = action;

      switch (this.data.step) {
        case 1:
          this.activeName = 'create';
          break;
        case 2:
        case 3:
          this.activeName = 'check';
          break;
        case 4:
        case 5:
          this.activeName = 'recheck';
          break;
        case 6:
          this.activeName = 'money';
          break;
      } 

      this.visible = true;
    },

    close () {
      this.visible = false;
      this.$emit('dialog-close');
    },

    reset () {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.$refs['main-form'] && this.$refs['main-form'].resetFields();

      this.id   = null;
      this.data = null;
      this.activeName = 'create';
    },

    handleAction (action) {

      if (!!this.data) {
        this.$refs['dialog-action'].show(Object.copy(this.data), action);
      }
    },
  }
}
</script>

<style>

</style>
